<template>
  <div class="profileDiv">
    <el-form
      class="profile-top-div-elForm"
      :inline="inline"
      :label-position="labelPosition"
      :model="customerQuery"
    >
      <el-form-item label="客户类型：">
        <el-select
          v-model="customerQuery.categoryId"
          placeholder="请选择"
          @change="fetchData"
        >
          <el-option
            v-for="(item, index) in options"
            :key="index"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="搜索：">
        <el-input
          v-model="customerQuery.search"
          placeholder="客户名称/编码/账号/联系人"
        />
      </el-form-item>
      <el-form-item label="账户状态：" prop="status">
        <el-select
          v-model="customerQuery.status"
          placeholder="请选择"
          @change="fetchData"
        >
          <el-option
            v-for="item in options03"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="集团：" prop="groupId">
        <el-select
          v-model="customerQuery.groupId"
          placeholder="请选择"
          @change="fetchData"
        >
          <el-option
            v-for="item in options01"
            :key="item.index"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <!-- 查询,导出按钮。 -->
        <div>
          <el-button
            v-show="fold"
            :disable-transitions="TagTransition"
            @click="clickQuery()"
          >
            查询
          </el-button>
          <el-button
            v-show="fold"
            :disable-transitions="TagTransition"
            @click="reset()"
          >
            重置
          </el-button>
          <el-button
            v-show="true"
            :disable-transitions="TagTransition"
            @click="GoToAdd()"
            v-permissions="{
              role: ['Admin', 'GroupManagement', 'PurchaserManagement'],
            }"
          >
            新增
          </el-button>
          <!--          <el-button
            v-show="fold"
            :disable-transitions="TagTransition"
            @click="leadingOut"
          >
            导出
          </el-button>-->
          <!-- 打开/收起高级筛选内容按钮 -->
          <!--          <el-button style="margin-left: 50px" type="text" @click="handleFold">
            <span v-if="fold">高级筛选</span>
            <span v-else>收起高级筛选</span>
            <vab-icon :icon="fold ? 'arrow-down-s-line' : 'arrow-up-s-line'" />
          </el-button>-->
        </div>
      </el-form-item>
    </el-form>

    <!-- 伸缩后的input输入框集。 -->
    <!--    <div class="profile-open-div">
      <el-form
        class="profile-open-div-elForm"
        :inline="true"
        :label-position="labelPosition"
        label-width="85px"
        :model="customerQuery"
        @submit.native.prevent
        ref="ruleForm"
      >

        <el-form-item v-show="!fold" label="账户状态：" prop="status">
          <el-select
            v-model="customerQuery.status"
            placeholder="请选择"
            @change="fetchData"
          >
            <el-option
              v-for="item in options03"
              :key="item.index"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item v-show="!fold" label="集团：" prop="groupId">
          <el-select
            v-model="customerQuery.groupId"
            placeholder="请选择"
            @change="fetchData"
          >
            <el-option
              v-for="item in options01"
              :key="item.index"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        &lt;!&ndash;
         <el-form-item v-show="!fold" label="业务员：" prop="salesManCode">
          <el-select
            v-model="customerQuery.salesManCode"
            placeholder="请选择"
            @change="fetchData"
          >
            <el-option
              v-for="item in options04"
              :key="item.index"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
         <el-form-item
                 v-show="!fold"
                 label="协议价："
                 prop="protocolPricesStatus"
               >
                 <el-select
                   v-model="customerQuery.protocolPricesStatus"
                   placeholder="请选择"
                   @change="fetchData"
                 >
                   <el-option
                     v-for="item in options05"
                     :key="item.index"
                     :label="item.name"
                     :value="item.value"
                   />
                 </el-select>
               </el-form-item>
               <el-form-item v-show="!fold" label="打点：" prop="spot">
                 <el-select
                   v-model="customerQuery.spot"
                   placeholder="请选择"
                   @change="fetchData"
                 >
                   <el-option
                     v-for="item in options06"
                     :key="item.index"
                     :label="item.name"
                     :value="item.value"
                   />
                 </el-select>
               </el-form-item>
              <el-form-item
                 v-show="!fold"
                 label="客户账期："
                 prop="accountPeriodStatus"
               >
                 <el-select
                   v-model="customerQuery.accountPeriodStatus"
                   placeholder="请选择"
                   @change="fetchData"
                 >
                   <el-option
                     v-for="item in options07"
                     :key="item.index"
                     :label="item.name"
                     :value="item.value"
                   />
                 </el-select>
               </el-form-item>
               <el-form-item v-show="!fold" label="创建日期：" prop="periodCreateTime">
                 <el-date-picker
                   style="width: 230px"
                   v-model="customerQuery.periodCreateTime"
                   type="daterange"
                   align="right"
                   unlink-panels
                   range-separator=""
                   start-placeholder="选择日期"
                 ></el-date-picker>
               </el-form-item>
               <el-form-item v-show="!fold" label="子账号查询：" prop="title">
                 <el-input v-model="customerQuery.title" placeholder="请输入标题" />
               </el-form-item>
               <el-form-item v-show="!fold" label="时间账期：" prop="timePeriodStatus">
                 <el-select
                   v-model="customerQuery.timePeriodStatus"
                   placeholder="请选择"
                   @change="fetchData"
                 >
                   <el-option
                     v-for="item in options08"
                     :key="item.index"
                     :label="item.name"
                     :value="item.value"
                   />
                 </el-select>
               </el-form-item>
               <el-form-item v-show="!fold" label="授信额度：" prop="credits">
                 <el-select
                   v-model="customerQuery.credits"
                   placeholder="请选择"
                   @change="fetchData"
                 >
                   <el-option
                     v-for="item in options09"
                     :key="item.index"
                     :label="item.name"
                     :value="item.value"
                   />
                 </el-select>
               </el-form-item>&ndash;&gt;
      </el-form>
      &lt;!&ndash; 展开后的三个按钮。  &ndash;&gt;
      <div class="profile-open-div-btn">
        &lt;!&ndash; disable-transition="true"  禁用tag动画 &ndash;&gt;
        <el-button
          v-show="!fold"
          class="profile-open-div-el-tag-check"
          :disable-transitions="TagTransition"
        >
          <p @click="clickQuery()">查询</p>
        </el-button>
        <el-button
          v-show="!fold"
          :disable-transitions="TagTransition"
          @click="resetForm('ruleForm')"
        >
          <p>重置</p>
        </el-button>
        <el-button v-show="!fold" :disable-transitions="TagTransition">
          <p>导出</p>
        </el-button>
      </div>
    </div>-->
    <!-- 新增、批量导入 -->
    <div class="profile-mid-div">
      <!--      <el-button
        v-show="true"
        :disable-transitions="TagTransition"
        @mouseleave.native="hoverLeave"
        @mouseover.native="hoverEnter"
      >
        <el-dropdown :hide-on-click="true">
          <span style="font-size: 12px">
            批量导入
            <i id="icons" class="el-icon-arrow-down el-icon&#45;&#45;right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="importDialogVisible = true">
              导入客户信息
            </el-dropdown-item>
            <el-dropdown-item>导入开票信息</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-button>-->
    </div>
    <el-dialog
      title="导入客户信息"
      :visible.sync="importDialogVisible"
      width="30%"
      left
    >
      <el-form label-position="right" label-width="120px">
        <el-form-item label="下载模板：">
          点击下载
          <!-- 导出 -->
          <div
            @click="outExe"
            style="color: blue; display: inline-block; cursor: pointer"
          >
            客户信息模版
          </div>
        </el-form-item>
        <el-form-item label="选择上传文件：">
          <el-upload
            ref="upload"
            class="upload-demo"
            action="http://192.168.2.49:8081/customer/info/import/excel"
            :on-change="handleChange"
            :on-exceed="handleExceed"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :file-list="fileListUpload"
            :limit="limitUpload"
            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
            :auto-upload="false"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <div style="">
          <el-button
            type="primary"
            @click="submitUpload"
            style="margin-left: 294px"
          >
            确定
          </el-button>
          <el-button
            class="btn01"
            style="margin-left: 5px"
            @click="importDialogVisible = false"
          >
            取消
          </el-button>
        </div>
      </el-form>
    </el-dialog>
    <!-- table表格div -->
    <div class="profile-table-div">
      <el-table
        border
        :data="list"
        style="width: 100%"
        :row-style="tableRowStyle"
      >
        <!--        <el-table-column width="80">-->
        <!-- slot="header" 具名插槽。-->
        <!-- slot-scope 作用域插槽。-->
        <!-- 通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据 -->
        <!-- 现在v-slot 指令。它取代了 slot 和 slot-scope 指令 -->
        <!--          <template slot="header" slot-scope>
            <i
              class="el-icon-s-operation"
              @click.prevent="GoToShowTableChild()"
            ></i>
          </template>
        </el-table-column>-->
        <!-- prop属性来对应对象中的键名即可填入数据。 -->
        <el-table-column label="客户账号" prop="account" />
        <el-table-column label="客户名称" prop="name" />
        <el-table-column label="客户类型" prop="customerCategory.name" />

        <!--        <el-table-column label="账期" prop="accountPeriodStatus" width="80" />-->
        <el-table-column
          label="集团"
          show-overflow-tooltip
          prop="customerGroup.name"
        >
          <!-- <template slot-scope="scope">
            <div class="line-limit-length">
              {{ scope.row.customerAddress.addr }}
            </div>
          </template> -->
        </el-table-column>
        <el-table-column
          label="绑定账号"
          prop="systemUsers.username"
          width="180"
        />
        <el-table-column label="生效时间" prop="createTime" width="250" />
        <el-table-column label="状态">
          <template slot-scope="scope">
            {{
              scope.row.status == '1'
                ? '正常'
                : scope.row.status == '0'
                ? '禁用'
                : ''
            }}
          </template>
        </el-table-column>
        <!--        <el-table-column label="授信额度" prop="credits" width="120" />-->

        <!--        <el-table-column
          label="区域"
          prop="customerAddress.areaId"
        ></el-table-column>-->
        <!--        <el-table-column label="客户标签" prop="zip" />-->
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button
              size="small"
              type="text"
              @click="detailsRow(scope.$index, scope.row)"
              v-permissions="{
                role: ['GroupManagement', 'PurchaserManagement', 'Admin'],
              }"
            >
              详情
            </el-button>
            <el-button
              size="small"
              type="text"
              @click="editRow(scope.$index, scope.row)"
              v-permissions="{
                role: ['GroupManagement', 'PurchaserManagement', 'Admin'],
              }"
            >
              编辑
            </el-button>
            <el-button
              v-if="scope.row.status == '1'"
              size="small"
              type="text"
              @click="cancelling(scope.$index, scope.row)"
              v-permissions="{
                role: ['GroupManagement', 'PurchaserManagement', 'Admin'],
              }"
            >
              注销
            </el-button>
            <el-button
              v-if="scope.row.status == '0'"
              size="small"
              type="text"
              @click="activation(scope.$index, scope.row)"
              v-permissions="{
                role: ['GroupManagement', 'PurchaserManagement', 'Admin'],
              }"
            >
              激活
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <tabletopscreen
        v-show="showtabletopscreen"
        id="tabletopscreen01"
        class="tabletopscreen01"
        @hidepopup="hide()"
      /> -->
    </div>
    <!-- 分页 -->
    <el-pagination
      background
      :current-page="currentPage"
      :page-size="count"
      layout="total, prev, pager, next,sizes"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import tabletopscreen from '@/components/tabletop/tabletopscreen.vue'
import {
  getAllProfileType,
  getAllGroup,
  getList,
  customerTypeDel,
  inExcel,
  leadingOut,
  cancellingById,
  activationById,
} from '@/api/customer/customerProfile'
import { getAllArea, checkAreaId } from '@/api/distribution/lineArea'
import { baseURL } from '@/config' //引入baseURL变量。
export default {
  components: {
    tabletopscreen,
  },

  data() {
    return {
      list: [],
      listData: [],
      currentPage: 1, //当前页数。
      count: 20, //每页显示的条数。
      total: 0,
      labelPosition: 'right',
      inline: true,
      TagTransition: true,
      value: '',
      value2: '',
      input: '',
      fold: true,
      showtabletopscreen: false,
      options: [], //客户类型
      options01: [], //集团
      options02: [],
      options03: [
        {
          name: '正常',
          value: '1',
        },
        {
          name: '禁用',
          value: '0',
        },
      ],
      options04: [
        { name: '全部', value: 1 },
        {
          name: '未设置',
          value: 2,
        },
      ],
      options05: [
        {
          name: '全部',
          value: 0,
        },
        {
          name: '有协议价',
          value: 1,
        },
        {
          name: '无协议价',
          value: 2,
        },
      ],
      options06: [
        {
          name: '全部',
          value: 0,
        },
        {
          name: '已打点',
          value: 1,
        },
        {
          name: '未打点',
          value: 2,
        },
      ],
      options07: [
        {
          name: '全部',
          value: 0,
        },
        {
          name: '无账期',
          value: 1,
        },
        {
          name: '时间账期',
          value: 2,
        },
        {
          name: '金额账期',
          value: 2,
        },
      ],
      options08: [
        {
          name: '全部',
          value: 0,
        },
        {
          name: '正常',
          value: 1,
        },
        {
          name: '时间账期提醒',
          value: 2,
        },
        {
          name: '时间账期逾期',
          value: 2,
        },
      ],
      options09: [
        {
          name: '全部',
          value: 0,
        },
        {
          name: '正常',
          value: 1,
        },
        {
          name: '授信额度提醒',
          value: 2,
        },
        {
          name: '授信额度超出',
          value: 2,
        },
      ],
      customerQuery: {
        search: '',
        categoryId: null,
        areaId: null,
        status: undefined,
        salesManCode: '',
        groupId: undefined,
        protocolPricesStatus: null,
        spot: null,
        accountPeriodStatus: null,
        timePeriodStatus: null,
        credits: null,
      },
      importDialogVisible: false,
      //导出。
      imageUrl: '',
      msg: 'hello,Element',
      limitUpload: 1,
      fileTemp: '',
      file: '',
      fileListUpload: [],
      excelData: [],
      dataList: [],
    }
  },
  async created() {
    await this.fetchData()
    await this.filter()
    //setItem:将 baseURL 存储到 'dev'字段中。
    sessionStorage.setItem('dev', baseURL)
  },
  methods: {
    /*预览*/
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    async filter() {
      const res = await getAllProfileType()
      this.options = res.data
      const res01 = await getAllGroup()
      this.options01 = res01.data
      const res02 = await getAllArea()
      this.options02 = res02.data
    },
    clickQuery() {
      this.count = 20 //重置一下当前页数与显示条数。
      this.currentPage = 1
      this.fetchData()
    },
    //分页。
    //每页显示条数。
    handleSizeChange(val) {
      this.count = val
      this.fetchData()
    },
    //当前页数改变。
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchData()
    },
    reset() {
      this.customerQuery = {}
      this.fetchData()
    },
    fetchData() {
      this.listLoading = true //数据加载loading动画。
      getList(this.currentPage, this.count, this.customerQuery).then((res) => {
        this.list = res.data.list
        this.total = res.data.total
      })
      setTimeout(() => {
        this.listLoading = false
      }, 300)
    },
    check() {
      this.list.forEach((res, index) => {
        checkAreaId(res.customerAddress.areaId).then((resss) => {
          res.customerAddress.quyuname = resss.data.name
          //对象的合并。
          // this.list.customerAddress=Object.assign(this.list.customerAddress,quyu)
          // this.list.push(quyu)
        })
      })
    },
    //注销
    cancelling(index, data) {
      this.$confirm('此操作将注销[' + data.name + ']职位, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          // this.del(data.id)
          cancellingById(data.id).then((Response) => {
            this.fetchData()
          })
          this.$message({
            type: 'success',
            message: '注销成功',
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消注销',
          })
        })
    },
    // 激活
    activation(index, data) {
      this.$confirm('此操作将激活[' + data.name + ']职位, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          // this.del(data.id)
          activationById(data.id).then((Response) => {
            this.fetchData()
          })
          this.$message({
            type: 'success',
            message: '激活成功',
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消激活',
          })
        })
    },
    //callback。
    async del(e) {
      let res = await customerTypeDel(e)
      if (res.status == 200) {
        this.$message.success('删除成功!')
        this.fetchData()
      } else {
        this.$message(res.message)
      }
    },
    //form详情。
    detailsRow(index, item) {
      this.$router.push({
        path: '/customer/profileEdit',
        query: { item, flag: 'details', toDisableTable: true },
      })
    },
    tableRowStyle({ row, rowIndex }) {
      return 'background-color: pink'
    },
    //form编辑。
    editRow(index, item) {
      console.log(item, '1628')
      this.$router.push({
        path: '/customer/profileEdit',
        query: { item, flag: 'edit', showSubmit: true, customerId: item.id },
      })
    },
    //客户档案新增按钮。
    GoToAdd() {
      this.$router.push({
        path: '/customer/profileAdd',
        query: { flag: 'add', showSubmit: true },
      })
    },
    //点击使筛选菜单展开或收回。
    handleFold() {
      this.fold = !this.fold
    },
    //鼠标进入触发图标旋转动画。
    hoverEnter() {
      let hover = document.getElementById('icons')
      hover.style.transform = 'rotate(180deg)'
      hover.style.transition = 'transform .3s linear'
    },
    //鼠标移出触发图标旋转动画。
    hoverLeave() {
      let leave = document.getElementById('icons')
      leave.style.transform = 'rotate(0deg)'
      leave.style.transition = 'transform .3s linear'
    },
    //点击表头图标，显示子组件"tabletopscreen.vue"
    GoToShowTableChild() {
      this.showtabletopscreen = !this.showtabletopscreen
    },
    //通过$emit将子组件方法传给父组件，点击”取消“按钮隐藏popup。
    hide() {
      this.showtabletopscreen = !this.showtabletopscreen
    },
    //导入
    submitUpload() {
      this.$refs.upload.submit()
      this.importDialogVisible = false
    },
    async submit() {
      const res = await inExcel(file)
    },
    beforeRemove() {},
    handleRemove() {},
    handleExceed() {},
    handleChange() {},

    //注意这里的导出接口‘outExcel’没有用到 , window.location.href 本质就是get请求，已经自动将接口调好了 。
    // async getExe() {
    //   const res = await outExcel()
    // },
    async outExe() {
      this.$confirm('此操作将导出excel文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          //getItem:取本地储存的值。
          var url = sessionStorage.getItem('dev')
          window.location.href = url + '/customer/info/download/excel'
          //注意上面拼接地址时，不能将变量(value)用引号引起来，否则变量无法解析，取不到value真正的值。
        })
        .catch(() => {})
    },
    leadingOut() {
      var url = sessionStorage.getItem('dev')
      window.location.href = url + '/customer/info/export/excel'
    },
  },
}
</script>

<style lang="scss">
* {
  border: 0;
  margin: 0;
  padding: 0;
}
.profileDiv {
  padding: 20px 20px; // 撑开容器。
  //展开后的三个按钮。
  .profile-open-div-btn {
    margin-left: 83px;
  }
  //新增、批量导入按钮。
  .profile-mid-div {
  }
  //popup弹窗。
  .profile-table-div {
    .tabletopscreen01 {
      width: 780px;
      height: 380px;
      position: fixed;
      left: 20%;
      top: 42%;
    }
  }

  //element-ui 内置样式修改：
  //element-ui 内置样式修改：
  //element-ui 内置样式修改：
  .el-pagination .el-select .el-input .el-input__inner {
    width: 100px;
    border-radius: 2.5px;
  }
  .vab-theme-blue-black .el-dropdown {
    color: rgb(96 98 102);
    font-size: 13px;
  }
  .el-icon-s-operation {
    margin-left: 20px;
  }
  /*  .el-input__inner {
    width: 230px;
  }*/
  button.el-button.profile-open-div-el-tag-check.el-button--default.el-button--small {
    background-color: rgb(24 144 255);
    color: white;
  }
  .btn01 {
    margin-left: 70%;
  }
  .line-limit-length {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; //文本不换行，这样超出一行的部分被截取，显示...
  }
}
</style>
